<template>
    <!-- 签约管理 * 待签约列表 -->
    <div>
      <div class="manage_publish_top_One">
        <!-- 第一行 - 签约  -->
        <div style="border-bottom: 1px dashed #efefef" class="manage_One">
          <div class="display">
            <b class="manage_b">服务状态</b>
            <el-select
              style="margin-right: 15px; width: 170px"
              v-model="value"
              class="m-2"
              placeholder="请选择服务状态"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="display">
            <b class="manage_b">服务机构</b>
            <el-select
              style="margin-right: 15px; width: 170px"
              v-model="value"
              class="m-2"
              placeholder="请选择服务机构"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="display">
            <b class="manage_b">医生团队</b>
            <el-select
              style="margin-right: 15px; width: 170px"
              v-model="value"
              class="m-2"
              placeholder="请选择医生团队"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="display">
            <b class="manage_b">服务包</b>
            <el-select
              style="margin-right: 15px; width: 170px"
              v-model="value"
              class="m-2"
              placeholder="请选择服务包"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <!-- 第二行 - 选择日期 -->
        <div class="manage_One">
          <b class="manage_b">服务日期</b>
          <div class="display">
            <el-select
              style="margin-right: 15px; width: 430px"
              v-model="value"
              class="m-2"
              placeholder="请选择时间"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="display">
            <el-button type="primary">查询</el-button>
            <el-button>导出</el-button>
          </div>
        </div>
  
        <!-- table表格 -->
        <el-table
          :data="ebooks1.books.slice((pages - 1) * pageSize, pages * pageSize)"
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column type="index" label="编号" width="55"> </el-table-column>
          <el-table-column property="name" label="姓名" width="120" />
          <el-table-column property="ID" label="身份证号" show-overflow-tooltip />
          <el-table-column property="mobile" label="手机号" width="120" />
  
          <el-table-column
            property="serve.name"
            label="服务包"
            width="120"
          />
  
          <el-table-column property="project.name" label="服务项目" width="120" />
          <el-table-column property="team.name" label="服务医生" width="120" />
          <el-table-column property="state" label="签约状态" width="120">
            <template #default="scope">
              <el-tag v-if="scope.row.state" type="success">已签约</el-tag>
              <el-tag v-else type="danger">未签约</el-tag>
            </template>
          </el-table-column>
  
          <el-table-column property="time" label="申请时间" width="120" />
  
          <el-table-column label="操作" width="120">
            <a style="margin-right: 10px">查询详情</a>
            <a>编辑</a>
          </el-table-column>
        </el-table>
        <div style="margin-top: 15px">
          <el-pagination
            @update:current-page="changePage"
            v-model:current-page="page"
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="ebooks1.books.length"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive } from "vue";
  import { ElTable } from "element-plus";
  import axios from "axios";
  import request from "@/request";
  
  let ebooks1 = reactive({
    books: [],
  });
  let getDate = () => {
    axios.get("http://localhost:3461/api/serve").then((res) => {
      // console.log(res.data.data);
      ebooks1.books = res.data.data;
      console.log(ebooks1.books,'156');
    });
  };
  onMounted(() => {
    getDate();
  });
  
  // 当前页
  let pages = ref(1);
  // 每页显示条数
  let pageSize = 5;
  // 更改页数
  let changePage = (page) => {
    console.log(page);
    pages.value = page;
    console.log(pages);
  };
  </script>
  
  <style lang="scss" scoped>
  .display {
    display: inline-block;
  }
  
  /* 发布单位的最外层框 */
  .manage_publish_top {
    margin-top: 6px;
    width: 100%;
    background-color: #f0f0f0;
    height: 75vh;
    z-index: 100;
    text-align: center;
  }
  
  /* 发布单位 - 发布单位行 */
  .manage_publish_top_One {
    text-align: left;
    width: 95%;
    /* padding: 15px; */
    background-color: white;
    margin-top: 25px;
    display: inline-block;
  }
  
  .manage_b {
    margin-right: 20px;
  }
  
  .span {
    padding: 5px 20px;
    font-weight: 550;
    color: #6e6e6e;
  }
  
  .manage_One {
    padding: 18px 0;
    margin: 0 25px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>